<template>
    <el-form ref="form" :model="question" label-width="120px">

        <el-form-item label="题目类型">
            <el-radio-group v-model="question.type">
                <el-radio :label="1" @change="changeType">单选题</el-radio>
                <el-radio :label="2" @change="changeType">多选题</el-radio>
                <el-radio :label="3" @change="changeType">判断题</el-radio>
            </el-radio-group>
        </el-form-item>

        <el-form-item label="题目难易度">
            <el-radio-group v-model="question.level">
                <el-radio :label="1">入门</el-radio>
                <el-radio :label="2">一般</el-radio>
                <el-radio :label="3">困难</el-radio>
            </el-radio-group>
        </el-form-item>

        <el-form-item label="启用状态">
            <el-switch v-model="question.state" :active-value="1" :inactive-value="0"></el-switch>
        </el-form-item>

        <el-form-item label="题目权重">
            <el-input v-model="question.weight"></el-input>
        </el-form-item>

        <el-form-item label="隶属知识点">
            <el-input v-model="question.belong"></el-input>
        </el-form-item>

        <el-form-item label="题目名称">
            <el-input v-model="question.title"></el-input>
        </el-form-item>

        <el-form-item label="参考答案">
            <el-tag v-for="key in question.keys" :key="key" type="danger" class="question-key">{{key}}</el-tag>
        </el-form-item>

        <template v-for="(option, index) in question.optionMap[question.type]">
            <el-form-item :label="'选项' + baseData.SERIAL_NUM[1][index]" class="question-option">
                <template v-if="question.type === 3">
                    <el-tag type="" class="question-key">{{option.content}}</el-tag>
                </template>
                <template v-else>
                    <el-input type="textarea" v-model="option.content" placeholder="请输入选项内容"></el-input>
                    <el-button @click.prevent="delOption(option.id)" type="" icon="el-icon-delete" v-show="question.showDelButton" circle></el-button>
                </template>
                <!--<el-button @click.prevent="delOption(option.id)" v-show="question.showDelButton">删除</el-button>-->
                <el-checkbox v-model="option.key" @change="changeKey(index)">设为正确答案</el-checkbox>
            </el-form-item>
        </template>

        <el-form-item>
            <el-button @click="addOption" type="info" icon="el-icon-plus" class="question-add-option" v-show="question.showAddButton"></el-button>
            <!--<el-button @click="addOption" v-show="question.showAddButton">添加</el-button>-->
        </el-form-item>

        <el-form-item label="网友说">
            <el-input type="textarea" v-model="question.otherExplained"></el-input>
        </el-form-item>

        <el-form-item label="教师说">
            <el-input type="textarea" v-model="question.teacherExplained"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <el-button>取消</el-button>
        </el-form-item>

    </el-form>
</template>

<script>

    import {baseUtil} from "@/util/BaseUtil";

    export default {
        name: "question-add",
        data() {
            return {
                baseUtil : baseUtil,
                baseData : baseUtil.getBaseData(),
                question : {
                    // 标识号
                    serial : 6,
                    type : 1,
                    level : 1,
                    state : 1,
                    weight : '5',
                    belong : '',
                    title : '',
                    optionSize : 3,
                    optionMap : {
                        1 : [{id : 0, content : '', img : '', key : false,}, {id : 1, content : '', img : '', key : false,}],
                        2 : [{id : 2, content : '', img : '', key : false,}, {id : 3, content : '', img : '', key : false,}],
                        3 : [{id : 6, content : '正确', img : '', key : false,}, {id : 5, content : '错误', img : '', key : false,}]
                    },
                    keys : [],
                    otherExplained : '',
                    teacherExplained : '',
                    allowNum : 0,
                    showAddButton : true,
                    showDelButton : true,
                    maxOptionNum : 0,
                },
            }
        },
        methods: {
            // 验证数据
            checkOption() {
                this.question.optionSize = this.question.optionMap[this.question.type].length;
                // 判断是否需要显示删除按钮
                this.question.showDelButton = this.question.optionSize > 2;
                // 判断是否需要显示添加按钮
                if(this.question.type === 3) {
                    this.question.showAddButton = false;
                }else {
                    this.question.showAddButton = this.question.optionSize < this.question.maxOptionNum
                }
                // 校验参考答案
                let keyArray = [];
                for(let i = 0; i < this.question.optionMap[this.question.type].length; i++) {
                    let option = this.question.optionMap[this.question.type][i];
                    if(option.key) {
                        keyArray.push(baseData.SERIAL_NUM[1][i]);
                    }
                }
                this.question.keys = keyArray;
                // 验证答案个数
                this.question.allowNum = this.question.type === 2 ? this.question.optionMap[this.question.type].length : 1;
            },
            // 提交数据
            onSubmit() {

            },
            // 添加选项
            addOption() {
                if(this.question.type === 3) {
                    return;
                }
                let option = {id : this.question.serial++, content : '', img : '', key : false,};
                this.question.optionMap[this.question.type].push(option);
                this.checkOption();
            },
            // 删除选项
            delOption(id) {
                if(this.question.optionSize === 2) {
                    return;
                }
                let tempArray = [];
                for(let i = 0; i < this.question.optionMap[this.question.type].length; i++) {
                    if(this.question.optionMap[this.question.type][i].id !== id) {
                        tempArray.push(this.question.optionMap[this.question.type][i]);
                    }
                }
                this.question.optionMap[this.question.type] = tempArray;
                this.checkOption();
            },
            // 改变题型
            changeType(val) {
                this.checkOption();
            },
            // 改变答案
            changeKey(index) {
                if(this.question.optionMap[this.question.type][index].key && (this.question.type === 1 || this.question.type === 3)) {
                    // 先清除所有答案
                    for(let i = 0; i < this.question.optionMap[this.question.type].length; i++) {
                        if(i === index) {
                            continue;
                        }
                        this.question.optionMap[this.question.type][i].key = false;
                    }
                }
                this.checkOption();
            }
        },
        created() {
            this.question.serial = this.question.optionMap[1].length + this.question.optionMap[2].length + this.question.optionMap[3].length;
            this.question.maxOptionNum = 6;
            this.question.optionSize = this.question.optionMap[this.question.type].length;
        },
        mounted() {
            this.checkOption();
        }
    }
</script>

<style lang="scss" scoped>

    form{
        text-align: left;

        input[type=text]{
            display: inline-block;
        }

        .question-key{
            display: inline-block;
            margin: auto 10px;
            width: 55px;
            text-align: center;
            border-radius: 30px;
        }

        .question-option{
            vertical-align: middle;

            .el-textarea{
                display: inline-block;
                width: 50%;
            }
        }

        .question-add-option{
            width: 90%;
        }
    }

</style>
